﻿
@{
    Layout = "~/Views/Shared/_Style.cshtml";
}
@*layer*@
<link href="~/js/lib/layui/dist/css/layui.css" rel="stylesheet" />
<script src="~/js/lib/jquery/jquery-3.2.1.js"></script>
<script src="~/js/lib/layui/dist/layui.js"></script>
<script src="~/js/content/index/addMenu.js"></script>
<script src="~/js/content/tool.js"></script>
@*ztree*@
<link href="~/js/lib/ztree/css/demo.css" rel="stylesheet" />
<link href="~/js/lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="~/js/ztree/jquery-1.4.4.min.js"></script>
<script src="~/js/ztree/jquery.ztree.core-3.5.js"></script>
<script src="~/js/lib/ztree/js/jquery.ztree.excheck-3.5.js"></script>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新增菜单表单</legend>
</fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="MenuName" lay-verify="yz" autocomplete="off" placeholder="请输入菜单名称" class="layui-input">
        </div>
        <br />
        <label class="layui-form-label">菜单地址</label>
        <div class="layui-input-block">
            <input type="text" name="MenuUrl"  autocomplete="off" placeholder="请输入菜单地址" class="layui-input">
        </div>
        <br />
        <label class="layui-form-label">所属父级</label>
        <div class="layui-input-block">
            <input type="text" name="MenuParentId" autocomplete="off" placeholder="请选择所属父级" class="layui-input" onclick="showMenu();" readonly="readonly" id="citySel">
            <br />
            <span style="color:red">注：不选择默认为顶级菜单</span>
        </div>

    </div>
    <div class="layui-form-item" style="margin:0  0 0 40% ">
        <div class="layui-input-block">
            <br />
            <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<div id="menuContent" class="menuContent" style="display:none; position: absolute; ">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 200px; background-color:white"></ul>
    <input id="menuId" type="hidden" />
</div>

<SCRIPT type="text/javascript">
		<!--
		var setting = {
			check: {
				enable: true,
				chkStyle: "radio",
				radioType: "all"
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick: onClick,
				onCheck: onCheck
			}
		};
        var zNodes = [];
        $.ajax({
            type: 'post',
            url: '/Role/GetAllMenuList',
            dataType: 'json',
            success: function (data) {
                for (var i = 0, l = data.length; i < l; i++) {
                        zNodes.push({ id: data[i].menuId, pId: data[i].menuParentId, name: data[i].menuName})
                }
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }
        });
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.checkNode(treeNode, !treeNode.checked, null, true);
            $("#menuId").val(treeNode.id);

		}
		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#citySel");
            cityObj.attr("value", v);
            $("#menuId").val(treeNode.id);
		}
		function showMenu() {
			var cityObj = $("#citySel");
			var cityOffset = $("#citySel").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
        }
</SCRIPT>
